import React from 'react';
import { Link } from 'react-router-dom';
import { ArticleListItem } from '@/interfaces/article';
import { formatDistanceToNow } from 'date-fns';

interface ArticleCardProps {
  article: ArticleListItem;
}

const ArticleCard: React.FC<ArticleCardProps> = ({ article }) => {
  const formattedDate = formatDistanceToNow(new Date(article.publishDate), { addSuffix: true });

  return (
    <Link to={`/article/${article.id}`} className="block">
      <article className="bg-white dark:bg-ios-gray-800 rounded-apple-lg shadow-apple hover:shadow-apple-lg transition-all duration-300 overflow-hidden group cursor-pointer">
      <div className="flex flex-col md:flex-row">
        {/* Cover Image */}
        {article.coverImage && (
          <div className="md:w-1/3 h-48 md:h-auto overflow-hidden">
            <img 
              src={article.coverImage} 
              alt={article.title}
              className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
            />
          </div>
        )}
        
        {/* Content */}
        <div className={`flex-1 p-6 ${article.coverImage ? 'md:w-2/3' : 'w-full'}`}>
          {/* Category & Read Time */}
          <div className="flex items-center space-x-2 mb-3">
            <span className="inline-flex items-center px-2.5 py-0.5 rounded-apple-sm text-xs font-medium bg-ios-blue/10 text-ios-blue">
              {article.category}
            </span>
            <span className="text-ios-gray-500 dark:text-ios-gray-400 text-sm">
              {article.readTime} min read
            </span>
          </div>

          {/* Title */}
          <h2 className="text-xl font-semibold text-ios-gray-900 dark:text-white mb-2 group-hover:text-ios-blue transition-colors">
            {article.title}
          </h2>

          {/* Excerpt */}
          <p className="text-ios-gray-600 dark:text-ios-gray-300 mb-4 line-clamp-2">
            {article.excerpt}
          </p>

          {/* Tags */}
          <div className="flex flex-wrap gap-2 mb-4">
            {article.tags.map((tag) => (
              <span 
                key={tag}
                className="inline-flex items-center px-2 py-1 rounded-apple-sm text-xs bg-ios-gray-100 dark:bg-ios-gray-700 text-ios-gray-700 dark:text-ios-gray-300"
              >
                #{tag}
              </span>
            ))}
          </div>

          {/* Author & Date */}
          <div className="flex items-center justify-between text-sm text-ios-gray-500 dark:text-ios-gray-400">
            <div className="flex items-center space-x-2">
              <div className="w-6 h-6 rounded-full bg-ios-gray-300 dark:bg-ios-gray-600"></div>
              <span>{article.author}</span>
            </div>
            <span>{formattedDate}</span>
          </div>
        </div>
      </div>
      </article>
    </Link>
  );
};

export default ArticleCard;